<template>
    <div >
        <el-button type="primary" @click="openDeatil(1)">详情一</el-button>
        <el-button type="primary" @click="openDeatil(2)">详情二</el-button>

        <el-dialog
            v-if="dialogVisible"
            title="查看详情"
            :visible.sync="dialogVisible"
            top="10vh"
            width="950px">
            <Detail :detailData="detailData"></Detail>
        </el-dialog>
    </div>
</template>
<script>
import Detail from './form.vue'
import { List } from 'base/lib'

export default {
    name: 'name', // 和菜单代码一致即可开启页面缓存
    components: { Detail },
    mixins: [List],
    data(){
        return {
            dialogVisible: false,
            detailData: null
        }
    },
    created(){
    },
    methods:{
        openDeatil(type) {
            if (type === 1) {
                this.detailData = {
                    nodes: [
                        { id: '0', style: { x: 200, y: 200 },data: { label: '采购策划', time: '17:00:00' },code: 'bug_design', state:1 ,desArr: [{currentSatet: 'a'}]},
                        { id: '1', style: { x: 200, y: 200 },data: { label: '采购需求', time: '17:00:05' },code: 'bug_require' , state:2 },
                        { id: '2', style: { x: 200, y: 200 },data: { label: '采购计划', time: '17:00:12' },code: 'bug_plan', state:2 },
                        { id: '3', style: { x: 200, y: 200 },data: { label: '采购方案', time: '17:00:30' },code: 'bug_case', state:2 },
                        { id: '4', style: { x: 200, y: 200 },data: { label: '询价单', time: '17:02:00' },code: 'ask_price', state:3 },
                        { id: '5', style: { x: 200, y: 200 },data: { label: '采购寻源', time: '17:02:40' },code: 'bug_source', state:3 },
                        { id: '6', style: { x: 200, y: 200 },data: { label: '合同管理', time: '17:05:50' },code: 'contract_mg', state:2 },
                        { id: '7', style: { x: 200, y: 200 },data: { label: '订单管理', time: '17:10:00' },code: 'order_mg', state:2 },
                    ],
                    edges: [
                        { source: '0', target: '1', data: { done: true } },
                        { source: '1', target: '2', data: { done: true } },
                        { source: '2', target: '3', data: { done: true } },
                        { source: '3', target: '4', data: { done: true } },
                        { source: '4', target: '5', data: { done: false }},
                        { source: '5', target: '6', data: { done: false } },
                        { source: '6', target: '7', data: { done: false } },
                    ],
                };
            } else {
                this.detailData = {
                    nodes: [
                        { id: '0', style: { x: 150, y: 250 }, data: { label: '采购策划', time: '17:00:00' },code: 'bug_design', state:1 ,desArr: [{currentSatet: 'a'}]},
                        { id: '1', style: { x: 150, y: 250 }, data: { label: '采购需求', time: '17:00:05' },code: 'bug_require' , state:2 },
                        { id: '2', style: { x: 150, y: 250 }, data: { label: '采购计划', time: '17:00:12' },code: 'bug_plan', state:2 },
                        { id: '3', style: { x: 150, y: 250 }, data: { label: '采购方案', time: '17:00:30' },code: 'bug_case', state:2 },
                        { id: '4', style: { x: 150, y: 250 }, data: { label: '询价单', time: '17:02:00' },code: 'ask_price', state:3 },
                        { id: '5', style: { x: 150, y: 250 }, data: { label: '采购寻源', time: '17:02:40' },code: 'bug_source', state:3 },
                        { id: '6', style: { x: 150, y: 250 }, data: { label: '合同管理', time: '17:05:50' },code: 'contract_mg', state:2 },
                        { id: '7', style: { x: 150, y: 250 }, data: { label: '订单管理', time: '17:10:00' },code: 'order_mg', state:2 },
                        { id: '8', style: { x: 150, y: 250 }, data: { label: '新增节点', time: '17:10:00' },code: 'order_mg', state:2 },
                        { id: '9', style: { x: 150, y: 250 }, data: { label: '新增节点', time: '17:10:00' },code: 'order_mg', state:2 },
                        { id: '10',style: { x: 150, y: 250 },  data: { label: '新增节点', time: '17:10:00' },code: 'order_mg', state:2 },
                        { id: '11',style: { x: 150, y: 250 },  data: { label: '新增节点', time: '17:10:00' },code: 'order_mg', state:2 },
                    ],
                    edges: [
                        { source: '0', target: '1', data: { done: true } },
                        { source: '1', target: '2', data: { done: true } },
                        { source: '2', target: '3', data: { done: true } },
                        { source: '3', target: '4', data: { done: true } },
                        { source: '4', target: '5', data: { done: false }},
                        { source: '5', target: '6', data: { done: false } },
                        { source: '6', target: '7', data: { done: false } },
                        { source: '7', target: '8', data: { done: false } },
                        { source: '8', target: '9', data: { done: false } },
                        { source: '9', target: '10', data: { done: false } },
                        { source: '10', target: '11', data: { done: false } },
                    ],
                };
            }
            this.dialogVisible = true
        },
    }
}
</script>
<style lang="scss" scoped>
    ::v-deep .el-dialog__body {
    overflow-y: auto;
    height: 750px;
    padding: 0 !important;
}
</style>